<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('入库均匀分析')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
</head>
<body>
<div data-options="region:'north'">
    <fieldset style="border-color: #E7F0FF">
        <form id="user-form">
            <div class="select-list">
                <ul>
                    <li>
                        &nbsp;&nbsp;&nbsp;<label>日期：</label>
                        <input type="text" placeholder="请单击选择日期：" name="startTime" id="startTime"/>
                    </li>
                </ul>
            </div>
        </form>
        <a class="btn btn-primary btn-rounded btn-sm" onclick="sc()"><i
                class="fa fa-search"></i>&nbsp;搜索</a>
    </fieldset>
</div>
<div id="main" style="width: 100%;height:600px;"></div>
<script type="text/javascript" src="/js/echarts.min.js"></script>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    layui.use('laydate', function () {
        var laydates = layui.laydate;
        laydates.render({
            elem: '#startTime'
            , type: 'month',
            /* ,range: '到' */
            format: 'yyyy-MM'
        })
    })


    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '入库均匀分析',
            x: 'center',
            y: 'top'
        },
        tooltip: {
            trigger: 'axis'//坐标轴触发
        },
        legend: {
            data: ['巷道分析数']
        },
        xAxis: {
            data: []
        },
        yAxis: {
            type: 'value'
        },
        toolbox: {
            show: true,
            feature: {
                /*  dataZoom: {
                     yAxisIndex: 'none'
                 }, */ //区域缩放，区域缩放还原
                dataView: {
                    readOnly: false
                }, //数据视图
                magicType: {
                    type: ['line', 'bar']
                },  //切换为折线图，切换为柱状图
                restore: {},  //还原
                saveAsImage: {}   //保存为图片
            }
        },
        series: [{
            name: '入库作业数',
            type: 'bar',
            data: [],
            itemStyle: {
                normal: {
                    label: {
                        show: true, //开启显示
                        position: 'top', //在上方显示
                        textStyle: {} //数值样式
                    }
                }
            }
        }]
    };
    var inData = [];
    var roadwayData = [];

    function sc() {
        var startTime = $("#startTime").val();
        $.ajax({
            "url": "/kpi/in?&startTime="+startTime,
            "type": "POST",
            "dataType": "json",
            "data": $("#form_search").serialize(),
            "success": function (json) {
                inData = json.in;
                roadwayData  = json.roadway
                myChart.hideLoading(); //隐藏加载动画
                myChart.setOption({ //加载数据图表
                    series: [{
                        data: inData
                    }],
                    // xAxis:{
                    //     data : roadwayData
                    // }
                });

            }
        });

        $.ajax({
            "url": "/kpi/roadway",
            "type": "POST",
            "dataType": "json",
            "data": $("#form_search").serialize(),
            "success": function (json) {
                roadwayData  = json.roadway
                myChart.hideLoading(); //隐藏加载动画
                myChart.setOption({ //加载数据图表

                    xAxis:{
                        data : roadwayData
                    }
                });

            }
        });
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    $(document).ready(function () {
        sc();
    })
</script>
</body>
</html>